<template>
	<view class="u-p-l-30 u-p-r-30">
		<view
			class="u-p-l-15 u-p-r-15 u-p-t-10 u-p-b-10 u-flex u-row-between voice"
			@click="hearAnswer"
			:style="[{ background: theme.bgColor, color: theme.color, borderRadius: '50px', minHeight: '60rpx' }]"
		>
			<view class="">
				<u-icon style="transform: rotate(90deg);" name="wifi"></u-icon>
				<text class="u-m-l-15">{{ duration }}</text>
			</view>
			<view class="u-m-r-10 u-flex u-col-center">
				<text class="item" :class="{ active: is_start }"></text>
				<text class="item" :class="{ active: is_start }"></text>
				<text class="item" :class="{ active: is_start }"></text>
				<text class="item" :class="{ active: is_start }"></text>
				<text class="item" :class="{ active: is_start }"></text>
				<text class="item" :class="{ active: is_start }"></text>
				<text class="item" :class="{ active: is_start }"></text>
				<text v-if="!is_start">听答案</text>
			</view>
		</view>
	</view>
</template>

<script>
// 语音答案播放
export default {
	name: 'fa-audio',
	props: {
		htmls: {
			type: String,
			default: ''
		}
	},
	watch: {
		htmls: {
			immediate: true,
			handler(val) {
				if (val) {
					// console.log(val)
					let regExp = new RegExp('(http.*?(.mp3|.wav|.aac|.PCM))|(\\d+(\\.\\d+)?)', 'g');
					let res = this.htmls.match(regExp);
					if (res && res.length == 2) {
						this.path = res[0];
						this.audioTime = parseFloat(res[1]);
						this.duration = this.audioTime.toFixed(0) + ' "';
					}
				}
			}
		},
		path(val) {
			this.innerAudioContext.src = val;
		}
	},
	data() {
		return {
			innerAudioContext: null,
			is_start: false,
			is_pause: false,
			duration: '5`20',
			audioTime: 0,
			path: ''
		};
	},
	//示例销毁
	beforeDestroy() {
		console.log('销毁了');
		this.is_start = false;
		if(this.innerAudioContext){
			this.innerAudioContext.destroy();
		}
		uni.$off('audioUpdate', this.audioUpdate);
	},
	mounted() {		
		uni.$on('audioUpdate', this.audioUpdate);
	},
	methods: {
		init(){
			if (!this.innerAudioContext) {
				this.innerAudioContext = uni.createInnerAudioContext();
				console.log(this.innerAudioContext)
				this.innerAudioContext.src = this.path;
			}
			this.innerAudioContext.onPlay(() => {
				this.is_start = true;
				this.is_pause = false;
				// console.log('播放');
			});
			//停止
			this.innerAudioContext.onStop(res => {
				// console.log('停止');
				this.duration = this.audioTime.toFixed(0) + ' "';
				this.is_start = false;
			});
			//暂停
			this.innerAudioContext.onPause(res => {
				// console.log('暂停');
				this.is_start = false;
			});
			//自然播放结束
			this.innerAudioContext.onEnded(res => {
				// console.log('自然停止');
				this.duration = this.audioTime.toFixed(0) + ' "';
				this.is_start = false;
			});
			//播放进度
			this.innerAudioContext.onTimeUpdate(res => {
				console.log('进度',res);
				if (this.audioTime - this.innerAudioContext.currentTime < 0) {
					this.duration = '0 "';
					return;
				}
				this.duration = (this.audioTime - this.innerAudioContext.currentTime).toFixed(0) + ' "';
			});
			//错误
			this.innerAudioContext.onError(res => {
				console.log(res);
			});
		},
		async hearAnswer() {
			if (!this.path) {
				this.$u.toast('答案音频不存在！');
				return;
			}
			//当前是播放/暂停
			if (!this.is_start) {
				uni.$emit('audioUpdate', '开始播放,通知其他人停止');
				await this.timelapse(100);
				this.init();
				await this.timelapse(100);
				this.innerAudioContext.play();
			} else {
				this.is_pause = true;
				this.innerAudioContext.pause();
			}
		},
		audioUpdate(data) {
			console.log(data);
			//当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放
			if (this.innerAudioContext && !this.innerAudioContext.paused) {
				this.innerAudioContext.stop();
			}
		},
		//延时
		timelapse(num) {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve();
				}, num);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.voice {
	position: relative;
	.item {
		width: 5rpx;
		height: 20rpx;
		margin-right: 2rpx;
		background: #ffffff;
		opacity: 0;

		&.active {
			opacity: 1;
			animation: volatility 1s infinite ease;
		}
		&:first-child {
			animation-delay: 0.3s;
		}
		&:nth-child(2) {
			animation-delay: 0.4s;
		}
		&:nth-child(3) {
			animation-delay: 0.6s;
		}
		&:nth-child(4) {
			animation-delay: 0.8s;
		}
		&:nth-child(5) {
			animation-delay: 1.1s;
		}
		&:nth-child(6) {
			animation-delay: 1.5s;
		}
		&:nth-child(7) {
			animation-delay: 2s;
		}
	}
}
@keyframes volatility {
	0% {
		height: 5rpx;
	}
	30% {
		height: 15rpx;
	}
	60% {
		height: 20rpx;
	}
	80% {
		height: 15rpx;
	}
	100% {
		height: 5rpx;
	}
}
</style>
